<template>
  <BasicModal title="新增回复" @register="register" :destroyOnClose="true" @ok="handleSubmit">
    <div class="p-2">
      <a-textarea
        v-model:value="dataRef.content"
        placeholder="请输入回复"
        :auto-size="{ minRows: 2, maxRows: 3 }"
        class="custom-text"
      />
      <div class="mt-2">
        <Upload
          :file-list="dataRef.fileList"
          :before-upload="(file) => beforeUpload(file)"
          @remove="(file) => handleRemove(file)"
          :multiple="true"
        >
          <Button>
            <UploadOutlined />
            上传文件
          </Button>
        </Upload>
      </div>
      <div class="flex justify-between mt-2">
        <div>
          <Checkbox v-model:checked="dataRef.isSecret">隐藏</Checkbox>
        </div>
      </div>
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal/index';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { getAddReply } from '/@/api/process/process';
  import { Checkbox, Upload, Button } from 'ant-design-vue';
  import { UploadOutlined } from '@ant-design/icons-vue';
  export default defineComponent({
    components: { BasicModal, Checkbox, Upload, Button, UploadOutlined },
    emits: ['register', 'success'],
    setup(_, { emit }) {
      const { createMessage } = useMessage();
      const dataRef = ref<any>({});
      const flowInfo = ref<any>({});
      const fileList = ref<any>([]);

      const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
        setModalProps({ minHeight: 100 });
        flowInfo.value = data.flowInfo;
        dataRef.value = {
          content: '',
          isSecret: false,
          parentId: data.record?.id,
        };
      });

      //上传前校验
      const beforeUpload = (file) => {
        fileList.value = [...fileList.value, file];
        return false;
      };
      // 上传文件删除
      const handleRemove = (file) => {
        const index = fileList.value.indexOf(file);
        const newFileList = fileList.value.slice();
        newFileList.splice(index, 1);
        fileList.value = newFileList;
      };

      async function handleSubmit() {
        try {
          let params = {
            flowId: flowInfo.value.flowId,
            myActionId: flowInfo.value.myActionId || '-1',
            parentId: dataRef.value.parentId,
            content: dataRef.value.content,
            isSecret: dataRef.value.isSecret ? 1 : 0,
            progress: 0,
          };
          if (!params.content) {
            createMessage.warning('回复内容不能为空');
            return;
          }
          console.log('params', params);
          const formData = new FormData();
          for (let v in params) {
            formData.append(v, params[v]);
          }
          let files: any = [...fileList.value];
          if (files.length) {
            files.forEach((item) => {
              formData.append('files', item);
            });
          }
          setModalProps({ confirmLoading: true });
          await getAddReply(formData);
          closeModal();
          emit('success');
        } finally {
          setModalProps({ confirmLoading: false });
        }
      }

      return {
        register,
        dataRef,
        handleSubmit,
        beforeUpload,
        handleRemove,
      };
    },
  });
</script>
